<template>
	<view class="lawPage">
		<view class="lawMain">
			<!-- 导航占位 -->
			<view class="nav">
				<text>智能选岗</text>
				<text>综合</text>
				<text>课程</text>
				<text>就业</text>
				<text>测评</text>
				<text class="active">法律援助</text>
			</view>
			
			<!-- 轮播 -->
			<view class="swiperCon">
				<swiper 
				      :indicator-dots="true"
				      :autoplay="true"
				      :interval="3000"
				      :duration="500" 
				      class="swiper"
				>
				      <swiper-item v-for="(item, index) in data.swiperList" :key="index">
				        <image :src="item.img" mode="aspectFill" class="swiper-img"></image>
				      </swiper-item>
				</swiper>
			</view>
			
			<!-- 4个模块 -->
			<view class="fourIcon">
				<!-- 每一项图标 -->
				<view
					v-for="(item,index) in data.iconList"
					:key="index"
					class="fourIconItem"
				>
					<!-- 图标-上图 -->
					<view class="fourIconItemTop">
						<image :src="item.img" mode="aspectFit"></image>
					</view>
					<!-- 图标-下文 -->
					<view class="fourIconItemBottom">{{item.text}}</view>
				</view>
			</view>
			
			<!-- 文章列表区域 -->
			<view class="lawArticle">
				<!-- 最新文章  阅读更多 -->
				<view class="lawArticleTitle">
					<text>最新文章</text>
					<text @tap="gotolawList()">查看更多&gt;</text>
				</view>
				
				<!-- 文章列表区域-内容区 -->
				<view class="lawArticleList">
					<!-- 列表的 每一项 -->
					<view
						v-for="(item,index) in data.picList"
						:key="item.id"
						class="lawArticleItem"
						@tap="gotolawDetails(item.id)"
					>
						<!-- 文章标题 -->
						<view class="lawArticleItemTitle">{{item.title}}</view>
						<!-- 文章主体 -->
						<view class="lawArticleItemMain">
							<!-- 左图 -->
							<view class="lawArticleItemMainImg">
								<image :src="item.img" mode="aspectFit"></image>
							</view>
							<!-- 右文 -->
							<view class="lawArticleItemMainRight">
								<!-- 文章简介 -->
								<view class="lawArticleItemMainRightText">{{item.con}}</view>
								<!-- 作者和日期 -->
								<view class="lawArticleItemMainRightCon">
									<text>作者：{{item.author}}</text>
									<text>{{item.date}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const data = ref({
		swiperList:[
			{ img:"/static/law/law_banner1.png"},
			{ img:"/static/law/law_banner2.png"},
			{ img:"/static/law/law_banner3.png"}
		],
		iconList:[
			{
				img:'/static/law/law_icon1.png',
				text:'职场管理'
			},
			{
				img:'/static/law/law_icon2.png',
				text:'情感心理'
			},
			{
				img:'/static/law/law_icon3.png',
				text:'健康医疗'
			},
			{
				img:'/static/law/law_icon4.png',
				text:'体育锻炼'
			}
		],
		picList:[
			{
				title:'12348你会用吗？手把手教你免费咨询律师',
				img:'/static/law/pic1.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老张',
				date:'2025-04-22 17:00'
			},
			{
				title:'洞察力：解锁人生与商业的底层逻辑',
				img:'/static/law/pic2.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老李',
				date:'2025-04-22 18:00'
			},
			{
				title:'从一元关系到三元关系：个人与关系的成长之路',
				img:'/static/law/pic3.png',
				con:'12348是国家的公共法律服务热线，提供法律咨询、法律援助、普法宣传等服务',
				author:'老王',
				date:'2025-04-22 19:00'
			}
		]
	})
	
	// 跳【文章列表】页
	const gotolawList =() => {
		uni.navigateTo({
			url:'/pages/lawList/lawList'
		})
	}
	
	// 跳转【文章详情】页
	const gotolawDetails = (id:any) => {
		uni.navigateTo({
			url:'/pages/lawDetails/lawDetails?id='+id
		})
	}
	
</script>

<style scoped>
/* 导航占位里的样式-合代码可删 */
.nav {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	background-color: #fff;
	color: #7e8892;
}
.active {
	color: #000;
	font-size: 38rpx;
}

/* 页面样式 */
.lawPage {
	width: 100%;
	background: #fff;
}
/* 主体 */
.lawMain {
	width: 100%;
	padding: 30rpx;
}

/* 轮播的容器 */
.swiperCon {
	width: 100%;
	height: 280rpx;
	margin: 20rpx 0;
	border-radius: 36rpx;
}

.swiper {
  width: 100%;
  height: 280rpx;
  border-radius: 36rpx;
}

.swiper-img {
  width: 100%;
  height: 100%;
  border-radius: 36rpx;
}

/* 4个图标 模块 的容器 */
.fourIcon {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	padding: 10rpx 0;
}
/* 每一项图标 */
/* 这是放图标的 容器 */
.fourIconItemTop {
	width: 100%;
	height: 90rpx;
	padding-bottom: 10rpx;
}
.fourIconItemTop image {
	width: 100%;
	height: 100%;
}
/* 这是放图标 下面的文字 */
.fourIconItemBottom {
	font-size: 24rpx;
}

/* 文章列表区域 */
.lawArticle {
	width: 100%;
	padding: 20rpx;
}

/* 最新文章 和 查看更多 */
.lawArticleTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px dashed #9a9a9a;
	padding: 30rpx 0;
	color: #2c8cfe;
}
/* 最新文章 */
.lawArticleTitle text:nth-child(1) {
	font-size: 30rpx;
	font-weight: bold;
}
/* 查看更多 */
.lawArticleTitle text:nth-child(2) {
	font-size: 24rpx;
	color: #9a9a9a;
	text-decoration-line: underline;
}

/* 文章列表-内容区 */
.lawArticleList {
	width: 100%;
}

/* 列表的每一项 */
.lawArticleItem {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-right: 5rpx;
	margin-bottom: 20rpx;
	border-bottom: 1px solid #ccc;
	padding-bottom: 20rpx;
}
.lawArticleItem:last-child {
	border-bottom:0
}
/* 文章标题 */
.lawArticleItemTitle {
	margin-bottom: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lawArticleItemMain {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 左侧-文章缩略图 */
.lawArticleItemMainImg {
	width: 24%;
	height: 100%;
	margin-right: 10rpx;
}
.lawArticleItemMainImg image {
	width: 100%;
	height: 130rpx;
}

/* 右侧-内容 */
.lawArticleItemMainRight {
	width: 72%;
	height: 130rpx;
	display: flex;
	flex-direction: column;
	padding-bottom: 8rpx;
}

/* 文章简介 */
.lawArticleItemMainRightText {
	width: 100%;
	color: #9a9a9a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

/* 作者 和 日期 */
.lawArticleItemMainRightCon {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* 作者样式 */
.lawArticleItemMainRightCon text:nth-child(1) {
	color: rgba(44, 140, 253, 1);
	background: rgba(219, 236, 255, 1);
	padding: 5rpx 20rpx;
	border-radius: 16rpx;
	border: 1px solid rgba(44, 140, 253, 1);
	font-size: 24rpx;
}
/* 日期样式 */
.lawArticleItemMainRightCon text:nth-child(2) {
	font-size: 26rpx;
	color: #aaa;
}
</style>
